JSONP (JSON with Padding) একটি প্রযুক্তি যা Cross-Domain Requests বা "ক্রস-ডোমেইন রিকোয়েস্ট" কে সমর্থন করতে ব্যবহৃত হয়, বিশেষ করে AJAX রিকোয়েস্টের ক্ষেত্রে। যখন একটি ওয়েব পেজ অন্য ডোমেইন থেকে ডেটা লোড করার চেষ্টা করে, তখন এটি Same-Origin Policy (একই উত্স নীতি) এর কারণে সমস্যা সৃষ্টি করে। JSONP এই সীমাবদ্ধতা পাশ করতে সাহায্য করে এবং JavaScript ব্যবহার করে অন্য ডোমেইন থেকে ডেটা গ্রহণ করতে সক্ষম হয়।
JSONP মূলত <script>
ট্যাগের মাধ্যমে কাজ করে। কারণ, <script>
ট্যাগের মাধ্যমে ক্রস-ডোমেইন রিকোয়েস্ট করা যায়, আর অন্য কোনো HTTP রিকোয়েস্ট (যেমন GET, POST) ক্রস-ডোমেইন রিকোয়েস্টে সমস্যা সৃষ্টি করে।
JSONP রিকোয়েস্টে, সাধারণত, সার্ভার একটি callback function ব্যবহার করে JSON ডেটা রিটার্ন করে। ক্লায়েন্ট (যেমন ব্রাউজার) সেই ডেটা সংগ্রহ করে এবং callback
ফাংশনে পাস করে। এর ফলে, JSONP রিকোয়েস্টের মাধ্যমে অন্য ডোমেইন থেকে ডেটা সংগ্রহ করা সম্ভব হয়।
ধরা যাক, আপনি একটি ওয়েব পেজ তৈরি করতে চান যা অন্য ডোমেইন থেকে JSON ডেটা গ্রহণ করবে। JSONP রিকোয়েস্ট করার জন্য, আপনাকে <script>
ট্যাগ ব্যবহার করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<div id="result"></div>
<script>
// Callback ফাংশন
function handleData(data) {
// JSON ডেটা দেখানো
document.getElementById("result").innerHTML = `Name: ${data.name}, Age: ${data.age}`;
}
// JSONP রিকোয়েস্ট
const script = document.createElement('script');
script.src = 'https://example.com/data?callback=handleData';
document.body.appendChild(script);
</script>
</body>
</html>
handleData()
ফাংশনটি callback function হিসেবে ব্যবহৃত হয়েছে। সার্ভার যখন JSONP রিকোয়েস্টের মাধ্যমে ডেটা প্রদান করবে, তখন সেটি এই ফাংশনে পাঠানো হবে।script.src
এর মাধ্যমে JSONP রিকোয়েস্ট করা হচ্ছে। URL এর শেষে callback=handleData
যোগ করা হয়েছে, যেখানে handleData
হল সেই ফাংশন যা JSONP রেসপন্সে ডেটা পাবে।JSONP সার্ভারের একটি উদাহরণ দেওয়া হলো (যে সার্ভারটি JSONP রেসপন্স পাঠাবে):
// JSONP সার্ভার কোড উদাহরণ (Node.js)
// Express.js ফ্রেমওয়ার্ক ব্যবহার করা হয়েছে
const express = require('express');
const app = express();
app.get('/data', (req, res) => {
const callback = req.query.callback;
const data = {
name: 'John',
age: 30
};
// JSONP রেসপন্স পাঠানো
res.jsonp(data);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
এখানে, সার্ভার একটি JSONP রেসপন্স পাঠাবে। সার্ভার jsonp()
ফাংশন ব্যবহার করছে যা রেসপন্সের মধ্যে callback function প্যারামিটারটি সন্নিবেশিত করবে। ক্লায়েন্ট সাইডে সেই callback ফাংশনটি কল হয়ে যাবে এবং ডেটা পাঠানো হবে।
CORS (Cross-Origin Resource Sharing) হল একটি নতুন পদ্ধতি যা JSONP-এর পরিবর্তে ক্রস-ডোমেইন রিকোয়েস্ট সমর্থন করতে ব্যবহৃত হয়। CORS বর্তমানে অনেক সিকিউর এবং JSONP-এর তুলনায় আরো ফ্লেক্সিবল। CORS ব্যবহার করা গেলে ব্রাউজারের সিকিউরিটি সীমাবদ্ধতা সমাধান হয় এবং সার্ভার থেকে JSON ডেটা নিরাপদভাবে প্রাপ্ত করা সম্ভব হয়।
JSONP কিছু পুরোনো ব্রাউজার এবং অ্যাপ্লিকেশনগুলোর জন্য কার্যকরী হতে পারে, তবে বর্তমানে অধিকাংশ পরিস্থিতিতেই CORS প্রেফার করা হয়।
JSONP (JSON with Padding) একটি প্রযুক্তি যা ক্রস-ডোমেইন AJAX রিকোয়েস্ট সমর্থন করতে ব্যবহৃত হয়। এটি সার্ভারের কাছ থেকে JSON ডেটা পেতে ব্যবহৃত হয় এবং একটি callback function এর মাধ্যমে ডেটা ক্লায়েন্ট সাইডে প্রেরণ করা হয়। JSONP সহজ এবং দ্রুত ডেটা লোডের জন্য ব্যবহৃত হলেও এর কিছু নিরাপত্তাজনিত সমস্যা এবং সীমাবদ্ধতা রয়েছে। বর্তমানে CORS (Cross-Origin Resource Sharing) JSONP এর একটি আধুনিক এবং সিকিউর সমাধান হিসেবে ব্যবহৃত হচ্ছে।
Read more